<template>
  <el-container>
    <el-header class="header">
      <el-menu
        :default-active="active"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        router
        active-text-color="#ffd04b">
        <el-menu-item index="home">
          <i class="el-icon-menu"></i>
          <span slot="title">美图点评</span>
        </el-menu-item>
        <!-- <el-menu-item index="about" disabled>
          <i class="el-icon-document"></i>
          <span slot="title">展示</span>
        </el-menu-item> -->
        <el-menu-item index="about">
          <i class="el-icon-document"></i>
          <span slot="title">展示</span>
        </el-menu-item>
      </el-menu>
    </el-header>
    <el-main>
        <el-table
          border
          stripe
          :data="list">
          <el-table-column
            align="center"
            type="index"
            label="序号">
          </el-table-column>
          <el-table-column
            align="center"
            prop="author"
            label="名称"
            width="180">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>姓名: {{ scope.row.reviewer }}</p>
                <p>日期: {{ scope.row.display_time }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium" :type="scope.row.type">{{ scope.row.author }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="email"
            label="邮箱"
            width="180">
          </el-table-column>
          <el-table-column
            align="center"
            prop="title"
            label="标题"
            width="180"
            >
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="content"
            label="内容">
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="queryParams.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryParams.limit"
          layout="total, sizes, prev, pager, next"
          :total="total">
        </el-pagination>
    </el-main>
  </el-container>
</template>

<script>

import { fetchList } from '@/api/article'


export default {
  name: 'home',
  components: {},
  data() {
    return {
      active: 'about',
      queryParams: {
        page: 1,
        limit: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id',
      },
      list: [],
      total: 0,
    };
  },
  mounted() {
    this.query()
  },
  methods: {
    query() {
      fetchList(this.queryParams).then(({ data }) => {
        this.list = data.list
        this.total = data.total
        console.log('total', data.total)
      })
    },
    handleSizeChange(val) {
      this.queryParams.limit = val
      this.query()
    },
    handleCurrentChange(val) {
      this.queryParams.page = val
      this.query()
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
  },
};
</script>
<style lang="scss" scoped>
$--color-primary: #FFC340;
.header {
  padding: 0;
  background-color: $--color-primary;
}
.image {
  width: 220px;
  height: 110px;
}
.image-slot {
  height: 110px;
  line-height: 110px;
}
</style>
